<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪元素选择器 虚假的元素的选择器 */
        /* 可以修改提示信息的样式 */
        #username::placeholder{
            color: red;
        }
    </style>
</head>

<body>
    <!-- form 代表一个表单 -->
    <form>
        <!-- fieldset 是一个外边框 -->
        <fieldset>
            <!-- legend是一个标题 -->
            <!-- 整理代码快捷键  alt+shift+F -->
            <legend>这是一个表单</legend>
            <!-- text  文本框 -->
            <!-- required代表输入不能为空 -->
            <!-- autofocus="autofocus" 代表自动焦点 -->
            用户名：<input id="username" type="text" 
            name="username" placeholder="请输入用户名"
            required="required" autocomplete="off"
            ><br>
            <!-- 密码框 -->
            密码：<input type="password" autofocus="autofocus" name="password"><br>
            <!-- 单选 -->
            性别：<input type="radio" name="sex" value="nan">男
            <input type="radio" name="sex" value="nv">女
            <br>
            <!-- 多选 -->
            爱好<input type="checkbox" name="aihao" value="lanqiu">篮球
            <input type="checkbox" name="aihao" value="zuqiu">足球
            <input type="checkbox" name="aihao" value="paiqiu">排球
            <br>
            <!-- 下拉列表 -->
            班级：<select name="banji">
                <option value="1">1班</option>
                <option value="2">2班</option>
                <option value="3">3班</option>
            </select>
            <!-- 文件上传 
            multiple="multiple" 代表可以上传多个文件
            -->
            <br>
            <input type="file" multiple="multiple">
            <br>
            邮件：<input type="email" name="email" autocomplete="off">
            <br>
            <!-- url 可以分为4个部分  有两部分可以省略
                1.协议   http：//   ftp：//
                2.域名（ip地址） www.baidu.com    192.168.3.52
                3.端口号 ：数字    ：80     ：3306（mysql的默认端口号）
                //端口号作用：一台服务器 运行很多软件   192.168.3.52  
                每个软件都会u有他自己的端口号  80端口就是网络服务  3306 就是mysql
                4.资源地址： user/xxxx

            -->
            url: <input type="url" name="url" >
            <br>
            日期： <input type="date" name="date" >
            <br>
            颜色：<input type="color" name="color">
            <br>
            下拉输入框：<input list="mydata">
            <datalist id="mydata">
                <option value="1111"></option>
                <option value="2222"></option>
            </datalist>
            <!-- 提交按钮 -->
            <input type="submit">
        </fieldset>
    </form>
</body>

</html> 